<template>
  <div class="pageContainer commonClass">
    <!-- 批量操作选择器 -->
    <el-select
      v-model="bulkOperation"
      clearable
      placeholder="批量操作"
      style="width: 8%; margin-right: 20px; margin-left: 15px"
    >
      <el-option
        v-for="item in bulkOperationOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <!-- 确定按钮 -->
    <el-button plain>确定</el-button>

    <!-- 分页 -->
    <el-pagination
      class="paging"
      background
      layout="prev, pager, next"
      :total="50"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    name:'Pagination',
    props: ['bulkOperationOptions'],
    setup() {
        const bulkOperation = ref('')
        
        return {
            bulkOperation
        }
    },
})
</script>

<style>
.pageContainer {
  position: relative;
  display: flex;
  align-items: center;
  outline: 1px solid rgb(210, 210, 210);
}

.paging {
  position: absolute;
  right: 15px;
}

</style>